<template>
    <div class="home">
        <nav-bar
        @state="setState"
        :isShow="isShow"
        >
        </nav-bar>
        <div class="container">
            <empty v-if="isShow"></empty>
            <article-list
            v-else
            :state="state"
            :list="List"
            :select="select"
            @onRefresh="onRefresh"
            @select="getSelect"
            @onload="onLoad"
            :finished="finished"
            >
            </article-list>
        </div>
        <operate
        :state="state"
        :isShow="isShow"
        :selectList="selectList"
        @selectAll="selectAll"
        @selectDel="selectDel"
        >
        </operate>
    </div>
</template>

<script>
import NavBar from '../components/NavBar'
import Empty from '../components/Empty'
import ArticleList from '../components/List'
import Operate from '../components/Operate'
import qs from 'qs'
import { Toast } from 'vant'
export default {
    name:'Home',
    components:{
        NavBar,
        Empty,
        ArticleList,
        Operate
    },
    props: {
        
    },
    data(){
        return{
            List: [],
            state: false,
            isShow: false,
            select: false,
            page: 1,
            selectList: [],
            finished: false
        }
    },
    methods:{
        setState(res){
            this.state = res
        },
        getSelect(res){
            this.selectList = res
        },
        selectAll(res){
            this.select = res
        },
        selectDel(){
            this.delArticle()
        },
        onLoad() {
            this.getArticle()
        },
        onRefresh() {
            this.getArticle()
        },
        delArticle(){
            this.$post('del',qs.stringify({
                token:'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdGF0dXMiOjEsImNoYW5uZWxJZCI6IjEwNDUiLCJ1c2VySWQiOiIxMDg4NDQzIn0.4owoDR0LGvJYzhHTVMhCNm1dHMxUQZiQiqehcavHgww',
                draftId:this.selectList,
                channelId: 1045
            }))
            .then(() => {
                Toast.success('删除成功')
                this.getArticle()
            })
            .catch(() => {
                Toast.fail('删除失败')
            })
        },
        getArticle(){
            this.$post('list',qs.stringify({
                token:'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdGF0dXMiOjEsImNoYW5uZWxJZCI6IjEwNDUiLCJ1c2VySWQiOiIxMDg4NDQzIn0.4owoDR0LGvJYzhHTVMhCNm1dHMxUQZiQiqehcavHgww',
                userId:1088443,
                pageId:this.page,
                channelId:1045
            }))
            .then((response) => {
                let data = response.data.data
                if(data.length <= 0){
                    this.finished = true
                    this.isShow = true
                }else if(data.length < 10){
                    this.List = data
                    this.List.forEach(value => {
                        value.check = false
                        value.draft_content = JSON.parse(value.draft_content)
                        value.create_time = this.timestampToTime(value.create_time)
                        value.type = this.itemize(Number(value.type_id))
                    })
                    this.finished = true
                }else{
                    this.page++
                    this.List = data
                    this.List.forEach(value => {
                        value.check = false
                        value.draft_content = JSON.parse(value.draft_content)
                        value.create_time = this.timestampToTime(value.create_time)
                        value.type = this.itemize(Number(value.type_id))
                    })
                }
                return true;
            })
            .catch(() => {
                this.finished = true
                this.isShow = true
            })
        },
        itemize(e){
            let type = ''
            switch(e){
                case 1:
                    type = '生活'
                    break;
                case 2:
                    type = '活动'
                    break;
                case 3:
                    type = '购物'
                    break;
                case 4:
                    type = '微分享'
                    break;
                case 5:
                    type = '游戏'
                    break;
                case 6:
                    type = '娱乐'
                    break;
                default:
                    type = '其他'
                    break;
            }
            return type
        },
        timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
        },
    },
    created() {
        
    },
    watch:{
        List:{
            handler(res){
                if(res.length === 0){
                    this.isShow = true
                }
            },
            deep:true
        },
    }
}
</script>

<style scoped>
.home .container{
    height:100vh;
    padding:0.92rem 0 1.5rem 0;
}
</style>